<!-- 搜索-关联设置 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="关联设置" name="1">
            <layout-pane label="关联列表">
                <el-select v-model="searchBindId" placeholder="请选择列表">
                    <template v-for="(item, index) in searchBindList">
                        <el-option :label="item.label" :value="item.value" />
                    </template>
                </el-select>
            </layout-pane>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import { useEditStore } from '@/store'
import LayoutPane from '@/components/setting-pane/layout-pane'
export default defineComponent({
    name: 'SearchBind',
    components: {
        LayoutPane
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const editStore = useEditStore()

        const widgetListFlat = computed(() => editStore.widgetListFlat)

        // 搜索框关联列表
        const searchBindList = computed(
            () => Object.values(widgetListFlat.value).filter(item => {
                const bindTypes = [
                    'topic', 'franchisee-list',
                    'group-buy-list'
                ]
                return bindTypes.includes(item.widgetData.eles.type)
            }).map(item => ({
                label: item.widgetData.eles.customFeature.name || item.widgetData.component.title,
                value: item.widgetData.eles.id
            }))
        )

        // 搜索框绑定ID
        const searchBindId = computed({
            get: () => widget.value.widgetData.eles.customFeature?.searchObject?.id || '',
            set: val => {
                if (val) {
                    const bindWidget = widgetListFlat.value[val]
                    console.log(bindWidget, searchBindList.value)
                    if (!!bindWidget) {
                        widget.value.widgetData.eles.customFeature.searchObject = {
                            // ...bindWidget.eles
                            id: bindWidget.widgetData.eles.id,
                            name: bindWidget.widgetData.component.title,
                            widgetIdPath: [val],
                            subPageResponse: 'inner-link',
                            subFuntionResponse: 'call',
                            isVessel: true
                        }
                    }
                } else {
                    widget.value.widgetData.eles.customFeature.searchObject = {}
                }
            }
        })

        return {
            widget,
            searchBindList,
            searchBindId
        }
    }
})
</script>
